<template>
  <div class="page">
    <header class="header">
      <nav class="navbar navbar-expand-lg navbar-dark bg-dark">
        <div class="container-fluid">
          <!-- Navbar content -->
          <button
            class="navbar-toggler"
            type="button"
            data-toggle="collapse"
            data-target="#navbarTogglerDemo01"
            aria-controls="navbarTogglerDemo01"
            aria-expanded="false"
            aria-label="Toggle navigation"
          >
            <span class="navbar-toggler-icon"></span>
          </button>
          <div class="collapse navbar-collapse" id="navbarTogglerDemo01">
            <a class="navbar-brand font-weight-bolder" style="font-size: 2rem;" href="#">Gas</a>
            <ul class="navbar-nav ml-auto mt-2 mt-lg-0 font-weight-bolder">
              <li class="nav-item">
                <a class="nav-link" href @click="Logout()">
                  Logout
                  <i class="iconfont icon-tuichu"></i>
                </a>
              </li>
            </ul>
          </div>
        </div>
      </nav>
    </header>
    <div class="page d-flex">
      <nav class="left-nav nav flex-column">
        <!-- 头像 -->
        <div class="portrait-header d-flex">
          <div class="gas">
            <img class="img-fluid rounded-circle" src="../assets/Images/avatar-1.jpg" alt />
          </div>
          <div class="title">
            <h1 class="h4">Gas</h1>
            <p>Hello My Blog</p>
          </div>
        </div>

        <!-- 路由 -->
        <span class="heading">Main</span>
        <ul class="navbar-nav">
          <li>
            <a href @click.prevent="comName='Home'">
              <i class="iconfont icon-shouye"></i>Home
            </a>
          </li>
          <li>
            <a href @click.prevent="comName='List'">
              <i class="iconfont icon-liebiao"></i>List
            </a>
          </li>
          <li>
            <a href @click.prevent="comName='Add'">
              <i class="iconfont icon-liebiao"></i>Add
            </a>
          </li>
        </ul>
      </nav>

      <!-- 内容 -->
      <div class="content">
        <!-- <Home></Home> -->
        <!-- <List></List> -->
        <!-- <Edit></Edit> -->
        <component :is="comName" :blog="editBlog"></component>
      </div>
    </div>
  </div>
</template>

<script>
import Home from "../components/Manage/Home";
import List from "../components/Manage/List";
import Edit from "../components/Manage/Edit";
import Add from "../components/Manage/Add";

export default {
  name: "Manage",
  components: {
    Home,
    List,
    Edit,
    Add
  },
  data() {
    return {
      comName: "Home",
      editBlog: Object
    };
  },
  methods: {
    Logout() {
      localStorage.removeItem("token");
    },
    Edit(blog) {
      this.comName = "Edit";
      this.editBlog = blog;
    }
  }
};
</script> 

<style scoped>
.page {
  background: #eef5f9;
}
.heading {
  text-transform: uppercase;
  font-weight: 400;
  margin-left: 20px;
  color: #ccc;
  font-size: 0.8em;
}
.left-nav {
  background: #fff;
  min-width: 250px;
  max-width: 250px;
  color: #686a76;
  -webkit-box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  box-shadow: 1px 1px 1px rgba(0, 0, 0, 0.1);
  z-index: 9;
}
.portrait-header {
  padding: 30px 15px;
}
.title {
  margin-left: 10px;
}
.title h1 {
  font-size: 1.1rem;
  color: #333;
  font-weight: 700;
}
.title p {
  font-size: 0.9em;
  font-weight: 200;
  margin-bottom: 0;
  color: #aaa;
}
.gas {
  width: 55px;
  height: 55px;
}
.left-nav ul {
  padding: 15px 0;
}
.left-nav ul li a {
  padding: 10px 15px;
  text-decoration: none;
  display: block;
  font-weight: 300;
  border-left: 4px solid transparent;
  position: relative;
  font-size: 0.9em;
}
.left-nav ul li a:hover {
  background: #796aee;
  color: #fff;
  border-left: 4px solid #3b25e6;
}
.left-nav ul li a i {
  font-size: 1.2em;
  margin-right: 10px;
  -webkit-transition: none;
  transition: none;
}
.content {
  width: calc(100% - 250px);
  min-height: calc(100vh - 70px);
}
</style>